<template>
	<!--产业演进对比分析-->
	<div class="contain-box">
		<div class="left-menu">
			<div :class="['menu-list-item', activeLeftInex == index ? 'activeLeftItem' : 'defaultLeftItem']"
			 @click="choiceLeftMenu(index)"
			 v-for="(item,index) in leftMenu"
			 :key="index">{{item.name}}</div>
		</div>
		<div class="development-analysis">
			<div class="tabSwicthbox">
				<li v-for="(item,index) in tabListText" :key="index" :class="{active:activeTitle==item.name}" @click="tabClick(item,index)"><span>{{item.name}}</span></li>
			</div>
			<div class="evolution-comparison-content" v-if="activeTitle==='产业概况'">
				<el-row style="height:100%">
					<el-col span="10">
						<container-block class="normal-block_local" chartID="chart1" title="产业简介及发展重点" chartType="getStackBar" height="48vh">
							<template>
								<div class="GK-box" style="margin-left:1.7vw;margin-right:1.7vw;margin-top:1.7vh;color: #fff;font-size: 1.24vw;line-height:1.8">
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{GKdata.first}}
										<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{GKdata.second}}
								</div>
							</template>
						</container-block>
						<container-block class="normal-block_local" chartID="chart2" title="明星企业" chartType="getStackBar" height="30vh">
							<template>
								<el-row v-for="(item,index) in starCompanyData[industryType]" :key="index" style="margin-left:1.2vw;margin-top:1.7vh;width:100%">
									<el-col span="8" v-for="(itm, ins) in item.group" :key="ins">
										<div style="margin-top:0.7vh;">
											<img :src="itm.logo" style="width:9vw;height:5vh" alt="">
										</div>
									</el-col>
								</el-row>
							</template>
						</container-block>
					</el-col>
					<el-col span="14">
						 <el-row style="height:30vh">
							<el-col span="12">
								<div class="echarts">
									<!-- 左上 - 折现柱状图 -->
									<div style="width:100%">
										<chart-block
										chartID="chart3"
										:title="BarAndLineOptionData.title"
										:optionData="BarAndLineOptionData"
										:chartType="industryType == '汽车产业' ? 'getPictorialBarAndLine2' : 'getNewLine'"
										height="30vh" style="padding:0 1vh 2vh 0;"></chart-block>
									</div>
                  <!-- industryType == '汽车产业' ? 'getPictorialBarAndLine2' : 'getBarAndLine' -->
								</div>
							</el-col>
							<el-col span="12">
								<div class="echarts">
									<!-- 右上 - 双折线区域图 -->
									<div style="width:100%">
										<chart-block chartID="chart4"
											:title="shadowLineOptionData.title"
											:optionData="shadowLineOptionData" :chartType="industryType == '汽车产业' ? 'getNewLine' : 'getBarAndLine'"
											height="29vh" style="padding:0 1vh 1vh 0"></chart-block>
									</div>
								</div>
							</el-col>
						</el-row>
						<div class="echarts">
							<!-- 居中 - 折现柱状图 -->
              <!-- getShadowLine   getBarLine -->
							<div style="width:100%">
								<chart-block chartID="chart5"
								:title="BarAndLineOptionData3.title"
								:optionData="BarAndLineOptionData3"
								:chartType="industryType == '汽车产业' ? 'getBarLine' : 'getNewLine'" height="26vh" style="padding:0 1vh 1vh 0" titleType="blueBig"></chart-block>
							</div>
						</div>
						<div class="echarts">
							<!-- 底部 - 折现柱状图 -->
							<div style="width:100%">
								<chart-block chartID="chart6" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData"
								chartType="getSingleLine" height="26vh" style="padding:0 1vh 1vh 0" titleType="blueBig"></chart-block>
							</div>
						</div>
					</el-col>
				</el-row>
			<!-- 产业概况结束 -->
			</div>
			<div class="evolution-comparison-content" v-if="activeTitle==='产业结构'">
				<el-row style="height:100%">
					<industrial-structure :industryType="industryType"></industrial-structure>
				</el-row>
			</div>
			<div class="evolution-comparison-content" v-if="activeTitle==='产业政策'">
				<el-row style="height:100%;display: flex;flex-direction: column;">
					<div class="search">
				<el-input placeholder="请输入内容" v-model="queryParams.title" class="input-with-select">
					<el-button @click="searchKey" slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
			<div class="condition">
				<div class="area" v-for="(item, index) in area" :key="index">
					<div class="header">
					<span class="lable-title">{{ item.label }}</span>
					<span
						class="all"
						style="width:200px;text-align:center;height:30px"
						:class="[item.active && 'active']"
						@click="queryAllData(item,index)"
					>全部</span>
					</div>
					<div class="box">
					<div
						class="block"
						:class="[ i == item.listIndex && 'active']"
						@click="querySubData(item, subItem,index,i)"
						v-for="(subItem, i) in item.list"
						:key="i"
					>{{ subItem.label }}</div>
					</div>
				</div>
			</div>
			<div class="total">
			已为你找到
			<span>{{ total }}</span> 条相关数据
			</div>
			<div class="table">
			<table-block
				:oprData="oprData"
				:pageSize="pageSize"
				:total="total"
				height="400"
        @cellClick="cellClick"
				@currentChange="currentChange"
				:currePage="queryParams.current"
			></table-block>
			</div>
				</el-row>
			</div>
			<div class="evolution-comparison-content" v-if="activeTitle==='产业承载'">
				<el-row style="height:100%;">
					<div class="comparison-list" v-for="(item,index) in comparisonList[industryType]" :key="index">
            <div v-if="isTitle" class="header">
              <div class="item left"></div>
              <div class="title">{{ item.title }}</div>
              <div class="item right"></div>
            </div>
						<div class="contain-list">
							<div class="list-item" @click="turnTo(lable.src)" v-for="(lable, labelIndex) in item.dataList" :key="labelIndex">
								<img :src="lable.img" alt="">
								<div class="bottom-title">{{lable.name}}</div>
							</div>
						</div>
					</div>
				</el-row>
			</div>
		</div>
	</div>

</template>

<script>
import {getCommonData10,
		getCommonDataSearch} from '@/api/pages.js'

export default {
	name: "development-analysis",
	components: {
    NormalBlock: () => import('@/components/normal-block'),
    ContainerBlock: () => import('@/components/container-block'),
		ChartBlock: () => import('@/components/chart-block'),
		TableBlock: () => import("@/components/table-block"),
		BashiMap: () => import('@/components/map/bashi-map'),
		industrialStructure: () => import('./industrial-structure')
	},
	props: {},
	data() {
		return {
			isTitle: true,
			leftMenu:[
				{ name: '汽车产业', type: '' },
				{ name: '电子产业', type: '' },
				{ name: '医药产业', type: '' }
      ],
      GKDataList: [
        {
          type: '汽车产业',
          data: {
            first: '汽车产业，是生产汽车有关的工业，包括研发、制造与销售等范畴，是世界主要经济支柱之一。汽车产业的核心是整车制造，主要分为乘用车和商用车，新能源和智能网联成为汽车产业未来发展的重要趋势。重庆汽车产业已在不少领域积累了明显优势，产业特色越发突出。',
            second: '重庆市将重点发展纯电动汽车、插电式混合动力汽车，大力发展燃料电池汽车，鼓励发展混合动力汽车；重点支持企业开发续航里程长、充电时间短、安全性能高的中高端汽车产业产品，产品质量技术要达到国内先进水平。'
          }
        },
        {
          type: '电子产业',
          data: {
            first: '电子产业是研制和生产电子设备及各种电子元件、器件的工业，是军民结合型工业，由广播电视设备、通信设备、雷达设备、电子计算机、电子元器件和其他电子专用设备等生产行业组成。电子制造业细分为电子器件制造业、电子元件制造业以及其他电子设备制造业；',
            second: '近年来重庆围绕“芯屏器核网”全产业链发展，不断完善产业生态，提升电子信息产业基础能力和产业链现代化水平, 以龙头企业和关键产品为核心，吸引原材料等上游产业集聚，进一步推进产业链的完善和延伸，促进智能终端配套产业向高端化、专业化和集群化方向发展,努力打造全国重要的电子核心零部件产业聚集地。'
          }
        },
        {
          type: '医药产业',
          data: {
            first: '医药制造行业属于技术密集型、资金密集型行业，对生产技术水平和研发创新能力要求较高。其产业链上游主要包含原材料、辅料、原料药、医用包材等供应商；下游主要包含经销商、配送商等药品流通或销售企业，以及医疗机构终端、零售终端和基层市场终端的终端市场。',
            second: '重庆市生物医药产业主要分布在两江新区、高新区、涪陵区、荣昌县和巴南区，形成“五园两带七基地”的产业格局，主要产业载体包括两江综合性医药产业园、高新区医药创新孵化园、涪陵现代中药产业园、荣昌医（兽）药产业园和巴南化学药产业园。'
          }
        }
      ],
      industryType: '汽车产业',
      GKdata:{
        first: '',
        second: ''
      },
			activeLeftInex:0,
			tabListText:[
				{name:'产业概况',id:'1'},
				{name:'产业结构',id:'2'},
				{name:'产业政策',id:'3'},
				{name:'产业承载',id:'4'},
			],
			activeTitle: '产业概况',
			starCompanyData: {
        '汽车产业': [
      {
        group: [
          {id: '1', logo: require('../../assets/images/logo/qiyan.png'), name: '中国汽车工程研究院股份有限公司'},
          {id: '2', logo: require('../../assets/images/logo/landai.png'), name: '蓝黛科技集团股份有限公司'},
          {id: '3', logo: require('../../assets/images/logo/changan.png'), name: '重庆长安汽车股份有限公司'},
        ]
      },
      {
        group: [
          {id: '4', logo: require('../../assets/images/logo/qinan.png'), name: '重庆秦安机电股份有限公司'},
          {id: '5', logo: require('../../assets/images/logo/qingling.png'), name: '庆铃汽车股份有限公司'},
          {id: '6', logo: require('../../assets/images/logo/ford.png'), name: '长安福特汽车有限公司'},
        ]
      },
      {
        group: [
          {id: '7', logo: require('../../assets/images/logo/lifan.png'), name: '力帆科技(集团)股份有限公司'},
          {id: '8', logo: require('../../assets/images/logo/syLogo.png'), name: '隆鑫通用动力股份有限公司'},
          {id: '9', logo: require('../../assets/images/logo/xiaokang.png'), name: '重庆小康工业集团股份有限公司'},
        ]
      },
    ],
      '电子产业':[
      {
        group: [
          {id: '1', logo: require('../../assets/images/logo/electronics/1.png'), name: ''},
          {id: '2', logo: require('../../assets/images/logo/electronics/2.png'), name: ''},
          {id: '3', logo: require('../../assets/images/logo/electronics/3.png'), name: ''},
        ]
      },
      {
        group: [
          {id: '4', logo: require('../../assets/images/logo/electronics/4.png'), name: ''},
          {id: '5', logo: require('../../assets/images/logo/electronics/5.png'), name: ''},
          {id: '6', logo: require('../../assets/images/logo/electronics/6.png'), name: ''},
        ]
      },
      {
        group: [
          {id: '7', logo: require('../../assets/images/logo/electronics/7.png'), name: ''},
          {id: '8', logo: require('../../assets/images/logo/electronics/8.png'), name: ''},
          {id: '9', logo: require('../../assets/images/logo/electronics/9.png'), name: ''},
        ]
      },
    ],
      '医药产业':[
      {
        group: [
          {id: '1', logo: require('../../assets/images/logo/medicine/1.png'), name: ''},
          {id: '2', logo: require('../../assets/images/logo/medicine/2.png'), name: ''},
          {id: '3', logo: require('../../assets/images/logo/medicine/3.png'), name: ''},
        ]
      },
      {
        group: [
          {id: '4', logo: require('../../assets/images/logo/medicine/4.png'), name: ''},
          {id: '5', logo: require('../../assets/images/logo/medicine/5.png'), name: ''},
          {id: '6', logo: require('../../assets/images/logo/medicine/6.png'), name: ''},
        ]
      },
      {
        group: [
          {id: '7', logo: require('../../assets/images/logo/medicine/7.png'), name: ''},
          {id: '8', logo: require('../../assets/images/logo/medicine/8.png'), name: ''},
          {id: '9', logo: require('../../assets/images/logo/medicine/9.png'), name: ''},
        ]
      },
    ],
  },
			// 左上-折线图
			BarAndLineOptionData: {
				LinearGradientColor: [
				//柱状图渐变色
				{
					topColor: "#47eaf9",
					bottomColor: "#0693d5"
				}
				],
				seriesData: [
				{
					name: "", //如果有图例，这个就不能为空
					data: [], //数据
					unit: "" //数据的单位
				},
				{
					name: "", //如果有图例，这个就不能为空
					data: [], //数据
					unit: "" //数据的单位
				}
				]
			},
			// 右上
			shadowLineOptionData:{
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'rgba(0,217,117,0.8)',
						bottomColor:'rgba(0,217,117,0.1)',
						LineCircleColor:"#00D975",//折线图颜色
						LineCircleBorderColor:"#00D975",//折线图描边颜色
					},
					{
						topColor:'rgba(211,89,0,0.8)',
						bottomColor:'rgba(211,89,0,0.1)',
						LineCircleColor:"#D35900",//折线图颜色
						LineCircleBorderColor:"#F28E26",//折线图描边颜色
					}
				]
			},
			// 居中
			BarAndLineOptionData3: {
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					}, {
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#4DE4E5',
						bottomColor: '#0CFCFF'
					},
					{
								topColor: 'RGBA(12, 252, 255, 1)',
								bottomColor: 'RGBA(12, 252, 255, 0)'
							},
				],
				LineCircleColor: "#47FF72",//折线图颜色
				LineCircleBorderColor: "#444",//折线图描边颜色
			},
			// 底部
			pictorialBarOptionData: {
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                LinearGradientColor: [//渐变色
                    { //折线图两侧竖线数据渐变色
                        topColor: "rgba(92, 210, 254,1)",
                        bottomColor: "rgba(92, 210, 254, 0)"
                    },
                    {//折线图填充区域渐变色
                        topColor: "rgba(105, 209, 239,1)",
                        bottomColor: "rgba(105, 209, 239, 0)"
                    },
                ],
                LineCircleColor: "#14d0e1",//折线图颜色
                LineCircleBorderColor: "#14d0e1",//折线图描边颜色
                min: ""
                // LinearGradientColor: [//柱状图渐变色
                //     {
                //         topColor: '#FE684D',
                //         bottomColor: '#FFC23A'
                //     },
                // ],
            },
			/////////////////////// 产业政策  搜索
			queryParams: {
				industryType: "汽车产业",
				title: "",
				year: "-1",
				level: "-1",
				current: 1,
				size: 8
			},
			oprData: {},
			pageSize: 8,
			//pageIndex: 1,
			total: 0,
			area: [
				{
				label: "出台年度",
				value: -1,
				active: true,
				key: "clzb",
				listIndex: -1,
				list: [
					{ label: "2021", value: 1 },
					{ label: "2020", value: 2 },
					{ label: "2019", value: 3 },
					{ label: "2018", value: 4 },
					{ label: "2017", value: 5 },
					{ label: "2016", value: 6 },
					{ label: "2015", value: 7 }
				]
				},
				{
				label: "政策级别",
				active: true,
				value: -1,
				key: "clsj",
				listIndex: -1,
				list: [
					{ label: "市级", value: 1 },
					{ label: "两江新区", value: 2 },
				]
				},
			],
			active: "全部",
			///////////////////////
			// 产业承载数据
			comparisonList:{
        '汽车产业':[
				{
					title: '重庆市汽车产业园区',
					dataList: [
						{ name: '龙兴工业开发区', img:require('@/assets/images/industry/1.png'),src:"http://gu.yaozh.com/parkDetails?id=73", id: 'asd' },
						{ name: '鱼复工业开发区', img:require('@/assets/images/industry/2.png'),src:"http://gu.yaozh.com/parkDetails?id=113", id: 'asd' },
						{ name: '渝北空港工业园区', img:require('@/assets/images/industry/3.png'),src:"http://www.kggy.com/", id: 'asd' },
						{ name: '九龙工业园区', img:require('@/assets/images/industry/4.png'),src:"http://www.cq.gov.cn/zsyz/zqcyyq/jlpq/202101/t20210114_8841191.html", id: 'asd' },
						{ name: '云河汽车产业园', img:require('@/assets/images/industry/1.png'),src:"", id: 'asd' },
						{ name: '永川高新区', img:require('@/assets/images/industry/2.png'),src:"", id: 'asd' },
					]
				},
				{
					title: '外省汽车产业园区',
					dataList: [
						{ name: '北京顺义区汽车产业园区', img:require('@/assets/images/industry/1.png'),src:"", id: 'asd' },
						{ name: '上海国际汽车城', img:require('@/assets/images/industry/2.png'),src:"", id: 'asd' },
						{ name: '广州南沙汽车产业园', img:require('@/assets/images/industry/3.png'),src:"", id: 'asd' },
						{ name: '柳州汽车产业基地集群', img:require('@/assets/images/industry/4.png'),src:"", id: 'asd' },
						{ name: '长春汽车产业集群', img:require('@/assets/images/industry/1.png'),src:"", id: 'asd' },
						{ name: '保定长城汽车工业园', img:require('@/assets/images/industry/2.png'),src:"", id: 'asd' },
					]
				},
      ],
        '电子产业':[
          {
            title: '重庆市电子产业园区',
            dataList: [
              { name: '西永微电子产业园', img:require('@/assets/images/industry/1.png'), src: 'http://www.xiyongpark.com/', id: 'asd' },
              { name: '两路寸滩保税港', img:require('@/assets/images/industry/2.png'), src: 'http://www.ccfta.com/', id: 'asd' },
              { name: '两江水土高新园', img:require('@/assets/images/industry/3.png'), src: 'http://ljt.liangjiang.gov.cn/service/detail/2248', id: 'asd' },
              { name: '重庆微电子产业园', img:require('@/assets/images/industry/4.png'), src: '', id: 'asd' },
              { name: '重庆科学城电子信息产业孵化园', img:require('@/assets/images/industry/1.png'), src: '', id: 'asd' },
              { name: '重庆集成电路产业园', img:require('@/assets/images/industry/2.png'), src: '', id: 'asd' },
            ]
          },
          {
            title: '外省电子产业园区',
            dataList: [
              { name: '苏州工业园', img:require('@/assets/images/industry/1.png'), src:'http://www.sipac.gov.cn/', id: 'asd' },
              { name: '北京经济技术开发区', img:require('@/assets/images/industry/2.png'), src:'http://kfqgw.beijing.gov.cn/', id: 'asd' },
              { name: '中关村科技园区', img:require('@/assets/images/industry/3.png'),src:'http://zgcgw.beijing.gov.cn/zgc/index/index.html', id: 'asd' },
              { name: '上海张江高新技术产业开发区', img:require('@/assets/images/industry/4.png'),src:'https://www.zjpark.com/', id: 'asd' },
              { name: '深圳市高新技术产业园区', img:require('@/assets/images/industry/1.png'),src:'', id: 'asd' },
              { name: '武汉东湖新技术开发区', img:require('@/assets/images/industry/2.png'),src:'http://www.wehdz.gov.cn/', id: 'asd' },
            ]
          },
        ],
        '医药产业':[
          {
            title: '重庆市医药产业园区',
            dataList: [
              { name: '重庆国际生物城', img:require('@/assets/images/industry/1.png'), src: 'http://www.cqbiocity.com/', id: 'asd' },
              { name: '重庆两江综合性医药产业园', img:require('@/assets/images/industry/2.png'), src: '', id: 'asd' },
              { name: '北大国际医院集团医药产业园', img:require('@/assets/images/industry/3.png'), src: '', id: 'asd' },
              { name: '高新区医药创新孵化园', img:require('@/assets/images/industry/4.png'), src: '', id: 'asd' },
              { name: '涪陵现代中药产业园', img:require('@/assets/images/industry/1.png'), src: '', id: 'asd' },
              { name: '荣昌医(兽)药产业园', img:require('@/assets/images/industry/2.png'), src: '', id: 'asd' },
            ]
          },
          {
            title: '外省医药产业园区',
            dataList: [
              { name: '张江生物医药基地', img:require('@/assets/images/industry/1.png'), src:'', id: 'asd' },
              { name: '中关村生命科学园', img:require('@/assets/images/industry/2.png'), src:'http://www.lifesciencepark.com.cn/index.html', id: 'asd' },
              { name: '武汉光谷生物城', img:require('@/assets/images/industry/3.png'),src:'http://www.biolake.net.cn/', id: 'asd' },
              { name: '苏州生物医药产业园', img:require('@/assets/images/industry/4.png'),src:'http://www.biobay.com.cn/index.html', id: 'asd' },
              { name: '中国医药城', img:require('@/assets/images/industry/1.png'),src:'', id: 'asd' },
              { name: '南京生物医药谷', img:require('@/assets/images/industry/2.png'),src:'http://www.njbpv.cn/', id: 'asd' },
            ]
          },
        ],
      },

		}
	},
	created() {

	},
	mounted() {
		// 默认 汽车产业
    this.getAllData()
	},
	methods: {
    getGKData(){
      let index = this.GKDataList.findIndex((item) => { return item.type == this.industryType })
      if(index != -1){
        this.GKdata = this.GKDataList[index].data
      }
    },
    getAllData(){
      this.getEconomyData("Y011"); // 年度产业规模及增速
      this.getEconomyData3('Y012') // 全国增速对比
      this.getPotentialData3('Y009') // 月度产业规模及增速
      this.getConsumeData2('Y010') // 月度固定资产投资增速
      this.getGKData() // 获取产业概况
    },
    cellClick(row, column, cell, event){
      // console.log(row, column, cell, event)
      // sessionStorage.setItem("companyName", row.row.name);
      window.open(row.row.policy_url)
      // this.$router.push({
      //   path: "/enterprise/tabswich?tabIndex=0&companyId=" + row.row.id
      // });
    },
		choiceLeftMenu(index){
      this.activeLeftInex = index
      this.industryType = this.leftMenu[index].name
      this.getAllData()
      this.activeTitle = this.tabListText[0].name
    },
    turnTo(src){
      console.log(src)
      src != '' && window.open(src)
    },
		tabClick(item,index){
			this.activeTitle=item.name
			// 初始化页面调方法
			if (item.name === "产业概况") {
				this.getEconomyData("Y011"); // 年度产业规模及增速
				this.getEconomyData3('Y012') // 全国增速对比
				this.getPotentialData3('Y009') // 月度产业规模及增速
				this.getConsumeData2('Y010') // 月度固定资产投资增速
			} else if(item.name === "产业结构") {
				// 产业结构
			} else if(item.name === "产业政策") {
				this.getSelectArea();
			} else if(item.name === "产业承载") {
				// 产业承载
			}
		},
		// 折线图
		getEconomyData(busiCode) {
			if(this.industryType !== '汽车产业') {
				busiCode = 'Y007' // 全国增速比
      }
      console.log(busiCode)
			getCommonData10({busiCode:busiCode, industryType: this.industryType}).then(res => {
				if (res.data.code == 200) {
          if(this.industryType !== '汽车产业'){
            this.BarAndLineOptionData = {
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
            smooth:true,
            color: ['rgba(0, 189, 251, 1)', 'rgba(253, 210, 48, 1)'],
						// legendPosition:"center",
						LinearGradientColor:[//柱状渐变颜色
							{
								topColor:'rgba(0, 189, 251,0.8)',
								bottomColor:'rgba(0, 189, 251,0.1)',
								LineCircleColor:"rgba(0, 189, 251, 1)",//折线图颜色
								LineCircleBorderColor:"rgba(0, 189, 251, 1)",//折线图描边颜色
							},
							{
								topColor:'rgba(253, 210, 48, 1)',
								bottomColor:'rgba(253, 210, 48,0.1)',
								LineCircleColor:"rgba(253, 210, 48,1)",//折线图颜色
								LineCircleBorderColor:"rgba(253, 210, 48,1)",//折线图描边颜色
							}
						]
          }
          } else {
						this.BarAndLineOptionData = {
              title: res.data.data.title,
              categoryAxis: res.data.data.categoryAxis, //类目轴数据
              seriesData: res.data.data.seriesData,
              LinearGradientColor: [
              //柱状图渐变色
              {
                topColor: "#FDD230",
                bottomColor: "rgba(123,234,12,0.01)"
              }
              ],
              LineCircleColor: "#0CFCFF", //折线图颜色
              LineCircleBorderColor: "#0CFCFF" //折线图描边颜色
            };
          }
				}
			})
			.catch(err => {});
		},
		getEconomyData3(busiCode){
      if(this.industryType == '汽车产业'){
        busiCode = 'Y007'
      }
			getCommonData10({busiCode:busiCode, industryType: this.industryType}).then(res=>{
				if(res.data.code==200){
          if(this.industryType == '汽车产业'){
//             this.shadowLineOptionData= {
// //             title: res.data.data.title,
// //             categoryAxis: res.data.data.categoryAxis, //类目轴数据
// //             seriesData: res.data.data.seriesData,
// //             LinearGradientColor: [
// //             //柱状图渐变色
// //             {
// //               topColor: "#FDD230",
// //               bottomColor: "rgba(123,234,12,0.01)"
// //             }
// //             ],
// //             LineCircleColor: "#0CFCFF", //折线图颜色
// //             LineCircleBorderColor: "#0CFCFF" //折线图描边颜色
// //             };
// 	          title:res.data.data.title,
// 						categoryAxis: res.data.data.categoryAxis, //类目轴数据
// 						seriesData: res.data.data.seriesData,
//             smooth:true,
//             color: ['rgba(0, 189, 251, 1)', 'rgba(253, 210, 48, 1)'],
// 						// legendPosition:"center",
// 						LinearGradientColor:[//柱状渐变颜色
// 							{
// 								topColor:'rgba(0, 189, 251,0.8)',
// 								bottomColor:'rgba(0, 189, 251,0.1)',
// 								LineCircleColor:"rgba(0, 189, 251, 1)",//折线图颜色
// 								LineCircleBorderColor:"rgba(0, 189, 251, 1)",//折线图描边颜色
// 							},
// 							{
// 								topColor:'rgba(253, 210, 48, 1)',
// 								bottomColor:'rgba(253, 210, 48,0.1)',
// 								LineCircleColor:"rgba(253, 210, 48,1)",//折线图颜色
// 								LineCircleBorderColor:"rgba(253, 210, 48,1)",//折线图描边颜色
// 							}
//             ]
//           }
//             this.shadowLineOptionData.seriesData[0].unit = '万辆'
            this.shadowLineOptionData = {
						title:res.data.data.title,
						categoryAxis: res.data.data.categoryAxis, //类目轴数据
						seriesData: res.data.data.seriesData,
            smooth:true,
            color: ['rgba(0, 189, 251, 1)', 'rgba(253, 210, 48, 1)'],
						// legendPosition:"center",
						LinearGradientColor:[//柱状渐变颜色
							{
								topColor:'rgba(0, 189, 251,0.8)',
								bottomColor:'rgba(0, 189, 251,0.1)',
								LineCircleColor:"rgba(0, 189, 251, 1)",//折线图颜色
								LineCircleBorderColor:"rgba(0, 189, 251, 1)",//折线图描边颜色
							},
							{
								topColor:'rgba(253, 210, 48, 1)',
								bottomColor:'rgba(253, 210, 48,0.1)',
								LineCircleColor:"rgba(253, 210, 48,1)",//折线图颜色
								LineCircleBorderColor:"rgba(253, 210, 48,1)",//折线图描边颜色
							}
						]
            }
            // this.shadowLineOptionData.seriesData[0].unit = '万辆'
          } else {
            this.shadowLineOptionData.title = res.data.data.title
            this.shadowLineOptionData.categoryAxis = res.data.data.categoryAxis
            this.shadowLineOptionData.seriesData = res.data.data.seriesData
          }
console.log(this.shadowLineOptionData)
				}
			}).catch(err=>{

			})
		},
		getPotentialData3(busiCode) {
			getCommonData10({busiCode:busiCode, industryType: this.industryType}).then(res => {
				if (res.data.code === 200) {
          if(this.industryType == '汽车产业'){
					  this.BarAndLineOptionData3 = {
              title: res.data.data.title,
              categoryAxis: res.data.data.categoryAxis,
              seriesData: res.data.data.seriesData,
              smooth:true,
              color: ['rgba(253, 210, 48, 1)'],
              legendPosition:"center",
              LinearGradientColor: [//柱状图渐变色
              	{
              		topColor: 'RGBA(12, 252, 255, 1)',
              		bottomColor: 'RGBA(12, 252, 255, 0)'
              	},
              	{
              		topColor: 'RGBA(31, 255, 158, 1)',
              		bottomColor: 'RGBA(31, 255, 158, 0)'
              	},
              ],
              LineCircleColor: "rgba(31, 255, 158, 1)",//折线图颜色
              LineCircleBorderColor: "#eae73c",//折线图描边颜色
            }
          } else {
            this.BarAndLineOptionData3 = {
              // title: res.data.data.title,
              title: '2021年月度产业增速',
              categoryAxis: res.data.data.categoryAxis,
              seriesData: [res.data.data.seriesData[1]],
              smooth:true,
              color: ['rgba(253, 210, 48, 1)'],
              // legendPosition:"center",
              LinearGradientColor:[//柱状渐变颜色
                // {
                // 	topColor:'rgba(0, 189, 251,0.8)',
                // 	bottomColor:'rgba(0, 189, 251,0.1)',
                // 	LineCircleColor:"rgba(0, 189, 251, 1)",//折线图颜色
                // 	LineCircleBorderColor:"rgba(0, 189, 251, 1)",//折线图描边颜色
                // },
                {
                  topColor:'rgba(253, 210, 48, 1)',
                  bottomColor:'rgba(253, 210, 48,0.1)',
                  LineCircleColor:"rgba(253, 210, 48,1)",//折线图颜色
                  LineCircleBorderColor:"rgba(253, 210, 48,1)",//折线图描边颜色
                }
              ]
              // LinearGradientColor: [//柱状图渐变色
              // 	{
              // 		topColor: 'RGBA(12, 252, 255, 1)',
              // 		bottomColor: 'RGBA(12, 252, 255, 0)'
              // 	},
              // 	{
              // 		topColor: 'RGBA(31, 255, 158, 1)',
              // 		bottomColor: 'RGBA(31, 255, 158, 0)'
              // 	},
              // ],
              // LineCircleColor: "rgba(31, 255, 158, 1)",//折线图颜色
              // LineCircleBorderColor: "#eae73c",//折线图描边颜色
            }
          }
        }
			}).catch(err => {

			})
		},
		getConsumeData2(busiCode) {
            getCommonData10({busiCode:busiCode, industryType: this.industryType}).then(res => {
                if (res.data.code == 200) {
                    let datas = res.data.data.seriesData[0].data
                    let lineData = new Array(datas.length)
                    for (let i = 0; i < lineData.length; i++) {
                        if (i === 0) {
                            lineData[0] = datas[0]
                        } else if (i === lineData.length - 1) {
                            lineData[lineData.length - 1] = datas[lineData.length - 1]
                        } else {
                            lineData[i] = 0
                        }
                    }
                    this.pictorialBarOptionData.title = res.data.data.title
                    this.pictorialBarOptionData.categoryAxis = res.data.data.categoryAxis //类目轴数据
                    this.pictorialBarOptionData.seriesData = [
                        {
                            data: lineData,//折线图两侧竖线数据
                        },
                        res.data.data.seriesData[0]
                    ]
                    this.pictorialBarOptionData.min = Math.floor(Math.min(...datas))//最小值
                }

            }).catch(err => {

            })
        },
		// 产业政策
		// 查询当前条件的全部
		queryAllData(item, index) {
			this.queryParams.current = 1;
			this.area[index].active = true;
			this.area[index].listIndex = -1;
			this.active = item.label;
			if (item.key === "clzb") {
				this.queryParams.year = item.value;
			} else if (item.key === "clsj") {
				this.queryParams.level = item.value;
			}
			this.getSelectArea();
		},
		querySubData(item, subItem, index, i) {
      console.log(111, item)
			this.queryParams.current = 1;
			this.area[index].active = false;
			this.area[index].listIndex = i;
			this.active = subItem.label;
			if (item.key === "clzb") {
				this.queryParams.year = subItem.label;
			} else if (item.key === "clsj") {
				this.queryParams.level = subItem.label;
			}
			this.getSelectArea();
		},
		// 项目列表接口
		getSelectArea() {
			// 事件触发时只用设置全局参数数组就行
      let busiCode = "Y006";
      this.queryParams.industryType = this.industryType
			let parms = JSON.parse(JSON.stringify(this.queryParams));
			if (parms.title.trim() === "") {
				parms.title = "-1";
			}
			getCommonDataSearch(busiCode, parms).then(res => {
				if (res.data.code === 200) {
          this.oprData = []
          console.log('res', res)
					this.oprData.tableData = res.data.data.tableData
					this.oprData.list = res.data.data.list.records
					this.total = res.data.data.list.total;
					//console.log( this.total, this.queryParams.current)
				}
			}).catch(err => {
				console.log(err);
			});
		},
		currentChange(e) {
			// console.log(this.currePage)
			// this.currePage =e
			this.queryParams.current = e;
			this.getSelectArea();
		},
		searchKey() {
			this.queryParams.current = 1;
			this.getSelectArea();
		}
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.contain-box{
	width: 100%;
	display: flex;
	padding: 0 1.3vw;
	padding-top: 7vh;
	padding-bottom: 3vh;
	justify-content: space-between;
	.left-menu{
		width:15%;
		display: flex;
		flex-flow: column;
		align-items: center;
		.menu-list-item{
			height: 9.1vh;
			width: 70%;
			line-height: 9.1vh;
			/* text-align:center; */
			padding-left: 21%;
			background-size: 100% 100%;
			margin-bottom: 4.2vh;
			font-size: 1.8vh;
			color:rgba(231, 255, 252, .8);
			cursor: pointer;
		}
		.defaultLeftItem{
			background-image: url("~@/assets/images/lefttabs.png");
		}
		.activeLeftItem{
			// width: 85%;
			// margin-left: 3.7vh;
			font-weight: bold;
			color:rgba(231, 255, 252, .8);
			background-image: url("~@/assets/images/select.png");
      position: relative;
      &::after{
        width:15%;
        height:100%;
        content: '';
        display:block;
        position: absolute;
        right: -20%;
        top: 0;
        background: url("~@/assets/images/after.png") no-repeat;
        background-size: 100% 100%;

      }
		}
	}

  	.development-analysis {
		width: 85%;
		//height: 905px;
		margin: 0 auto;
		margin-top: -3.7vh;
		padding: 1vw; //这个是随便写的,只是示例,实际请根据设计图来吧
		padding-top: 0.7vh;
		background-image: url("~@/assets/images/sub_back.png");
		background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
		.evolution-comparison-content {
			height: calc(100% - 5.5vw);
			//width: calc(100% - 10.5vw);

			.normal-block_local {
				width: 100%;
				background: rgba(4, 35, 162, 0.08);
				border: 1px solid  #00E5ED;
				border: 1px solid #0e7fd6;
				box-shadow: 0 0 1.51vh rgba(1, 185, 71, 0.5) inset;
				//overflow-y: auto;
				margin-left:1vw;
				margin-top:1.7vh;
				//margin-right:1.7vw;
				margin-bottom:1.7vh;
				overflow: hidden;
			}
		}
		.comparison-list{
      .header{
				margin:3.4vh 0 3.4vh 0;
				text-align: center;
				height:4.6vh;
				line-height:4.6vh;
				font-size:2vh;
        color:rgba(231, 255, 252, 1);
        display:flex;
        justify-content: space-between;
        .title{

        }
        .item{
          flex:1;
        }
        .right{
          background: url('~@/assets/images/标题装饰.png') no-repeat 10px center;
        }
        .left{
          background: url('~@/assets/images/标题装饰.png') no-repeat 10px center;
          transform:rotateY(180deg)
        }
      }
			.contain-list{
				display:flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.list-item{
					width: 30%;
					height:28.6vh;
					position: relative;
					margin-bottom:3.4vh;
					cursor: pointer;
					img{
						width:100%;
						height:100%;
					}
					.bottom-title{
						width: 100%;
						text-align: center;
						color:rgba(12, 252, 255, 1);
						font-weight: bold;
						position:absolute;
						bottom:0;
						left:0;
						height:6.4vh;
						line-height: 6.4vh;
						background-color: rgba(0, 75, 90, .6);
					}
				}
			}
		}

		.echarts {
			margin-left: 3vw;
			//margin-right: 3vw;
		}

		.tabSwicthbox{
			width:100%;
			height:4.5vh;
			margin-bottom:1vh;
			background-image: linear-gradient(to right, rgba(3, 66, 123, .2),rgba(3, 66, 123, .1), rgba(3, 66, 123, 0));
			padding:0 2vh;
			display: flex;
			margin-top:2vh;
			li{
				flex: 1;
				height: 100%;
				list-style: none;
				transform:skew(-45deg);
				background-color: #009BB4;
				float: left;
				margin-right:.2vw;
				border:.5px solid #0CFCFF;
				span{
					display: block;
					line-height: 4.2vh;
					color:#fff;
					text-align: center;
					transform:skew(45deg);
					font-size: 0.95vw;
					font-weight: bold;
					cursor: pointer;
				}
			}
			li.active{
				background-color: #068C91;
				span{
					color:#fff
				}
			}
		}

		// 搜索
		.search {
			align-self: center;
			background: rgba(0, 0, 0, 0.3);
			margin-top: 4vh;
			// height: 6vh;
			width: 58.5vw;
			/deep/ .el-input--suffix .el-input__inner {
			// height: 6vh;
			font-size: 26px;
			}
		}
		.condition {
			color: honeydew;
			align-self: center;
			width: 80vw;
			// height: 23vh;
			padding: 1vh 1vw;
			margin-top: 4vh;
			border: 1px solid #0cfcff;
			background: rgba(0, 75, 90, 0.28);
			.area {
			margin-top: 28px;
			display: flex;
			.header {
				color: #0cfcff;
				width: 120px;
				display: flex;
				justify-content: space-between;
				span {
				padding: 4px;
				}
        .lable-title{
          width:100%;
          display: inline-block;
          white-space: nowrap;
        }
				.all {
				color: #fff;
				cursor: pointer;
				border: 1px solid transparent;
				box-sizing: border-box;
				}
				.active {
				color: #0cfcff;
				border: 1px solid #0cfcff;
				}
			}
			// .all{
			//     width: 200px;
			// }
			.box {
				/* height:300px; */
				display: flex;
				flex-wrap: wrap;
			}
			.block {
				margin-left: 20px;
				border: 1px solid transparent;
				padding: 4px;
				color: #fff;
				box-sizing: border-box;
				cursor: pointer;
			}
			.active {
				color: #0cfcff;
				border: 1px solid #0cfcff;
			}
			}
			.area:nth-child(1) {
			margin-top: 0;
			}
		}
		.total {
			color: honeydew;
			padding: 2.6vh 0;
			span {
			color: #0cfcff;
			}
		}
		.table {
			//   height: 40vh;
			//   overflow-y: auto;
		}
	}
}
.GK-box {
    height: 81%;
    overflow: scroll;
}




</style>
